<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由重定向</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便的设置路由重定向
-->

<body>
  <div id="app">
    <router-link to="wo">我的</router-link>
    <router-link to="ni">你的</router-link>
    <router-link to="ta">他的</router-link>

    <router-view></router-view>
  </div>
</body>
<script>
  "use strict";
  const wo = {
    template: `<h1 style="color:red; font-size:2rem">我就是我自己的了吧</h1>`
  };
  const ni = {
    template: `<h2>大家好，你自己没说</h2>`
  };
  const ta = {
    template: `<h6 style="color:green;">他。要输了了</h6>`
  };

  const router = new VueRouter({
    routes: [{
      // path表示需要被重定向原地址，redirect表示需要被重定向到新地址
      path: "/",
      redirect: "/ni"
    }, {
      path: "/wo",
      component: wo
    }, {
      path: "/ni",
      component: ni
    }, {
      path: "/ta",
      component: ta
    }]
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    router
  });
</script>

</html>